<template>
  <el-descriptions title="巡视记录详情" :column="2" >
    <el-descriptions-item label="巡视名称" width="50%" label-align="right">{{ form.patrolTaskName }}</el-descriptions-item>
    <el-descriptions-item label="巡视路线" width="50%" label-align="right">{{ form.patrolRouteName }}</el-descriptions-item>
    <el-descriptions-item label="巡视时长" width="50%" label-align="right">  {{ (form.patrolDuration / 60).toFixed(2) }}分</el-descriptions-item>
    <el-descriptions-item label="开始时间" width="50%" label-align="right">{{ form.startTime }}</el-descriptions-item>
    <el-descriptions-item label="结束时间" width="50%" label-align="right">{{ form.endTime }}</el-descriptions-item>
    <el-descriptions-item label="事件上报次数" width="50%" label-align="right">{{ eventRecordList.length }}</el-descriptions-item>
    <el-descriptions-item label="创建人" width="50%" label-align="right">{{ form.createName }}</el-descriptions-item>
    <!-- <el-descriptions-item label="执行人">{{ form.executeUserName }}</el-descriptions-item> -->
    <el-descriptions-item label="是否要求打卡" width="50%" label-align="right">
      <dict-tag :options="clock_flag" :value="form.clockFlag" style="display: inline-block;"/>
    </el-descriptions-item>
    <el-descriptions-item label="打卡时间" width="100%" :span="2" label-align="right">{{ form.clockTime }}</el-descriptions-item>
    <el-descriptions-item label="备注" width="100%" :span="2" label-align="right">{{ form.patrolTaskRemark }}</el-descriptions-item>
  </el-descriptions>

  <el-descriptions title="巡视设备记录" />
  <el-table v-loading="patrolRecordLoading" :data="patrolRecordList" height="400px">
    <el-table-column label="巡视设备名称" align="center" prop="equipmentName" />
    <el-table-column label="设备位置" align="center" prop="cameraGroupName" >
      <template #default="scope">
        {{ getParkPositionStr(scope.row.parkBuildingName, scope.row.parkBuildingAreaName, scope.row.parkBuildingFloorName, scope.row.parkBuildingRoomName) }}
      </template>
    </el-table-column>
    <el-table-column label="巡视时长" align="center" prop="patrolDuration" >
      <template #default="scope">
        {{ secondsToTime(scope.row.patrolDuration) }}
      </template>
    </el-table-column>
  </el-table>

  <el-descriptions title="巡视事件记录" />
  <el-table v-loading="eventRecordLoading" :data="eventRecordList" height="400px">
    <el-table-column label="事件类型" align="center" prop="eventType">
      <template #default="scope">
        <dict-tag :options="event_type" :value="scope.row.eventType" />
      </template>
    </el-table-column>
    <el-table-column label="报警时间" align="center" prop="eventTime" width="170" />
    <el-table-column label="记录监控" align="center" prop="equipmentName" />
    <el-table-column label="位置" align="center" prop="eventAddress" />
    <el-table-column label="抓拍照片" align="center">
      <template #default="scope">
          <el-button v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0" link type="primary" @click="showPicView(scope.row)">查看 </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialog.shouAdd" :title="dialog.title" width="800px" append-to-body destroy-on-close>
    <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
      <template v-for="(img, index) in selectedEventRecord.imgUrlList" :key="index">
        <el-image style="width: 200px;" :src="img.url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="selectedEventRecord.imgUrlList.map((item: any) => { return item.url })" :initial-index="4" fit="cover" />
      </template>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { getcameraPatrolTaskExcuter } from '@/api/security/video-patrol/camera-patrol-task-executer';
import request, { globalHeaders } from '@/utils/request';
import { getParkPositionStr } from '@/utils/parkUtil';
import { listCommeneventrecord } from '@/api/event/eventRecord'
import { parseTime, secondsToTime } from '@/utils/dateTime'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { camera_patrol_task_status, clock_flag } = toRefs<any>(proxy?.useDict('camera_patrol_task_status', 'clock_flag'));
const { ai_algorithm_type, alarm_type, event_type } = toRefs<any>(proxy?.useDict('ai_algorithm_type', 'alarm_type', 'event_type'));

const props = defineProps({
  cameraPatrolTaskExecutorId: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['close', 'submit']);

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const data = reactive<any>({
  form: {
    cameraPatrolTaskInfoLogId: undefined,
    remark: undefined,
    patrolTaskId: undefined,
    executeUserId: undefined,
    patrolDuration: undefined,
    startTime: undefined,
    endTime: undefined,
    eventNum: undefined,
    patrolTaskName: undefined,
    patrolRouteName: undefined,
    createName: undefined,
    executeUserName: undefined,
    description: undefined,
    imgUrlList: undefined,
    cameraPatrolTaskLogList: [],
    eventRecordList: []
  }
});
const { form } = toRefs(data);

let selectedEventRecord = reactive<any>({});
const showPicView = (row: any) => {
  selectedEventRecord = row
  dialog.shouAdd = true;
  dialog.title = '图片预览';
};

/**
 * 获取巡视记录
 */
const patrolRecordLoading = ref(false)
let patrolRecordList = ref<any>([])
const getPatrolLogList = () => {
  patrolRecordLoading.value = true
  request({
    url: '/camera/patrolTaskInfoLog/list',
    method: 'get',
    params: { pageSize: 99999, cameraPatrolTaskExecutorId: props.cameraPatrolTaskExecutorId }
  }).then((res: any) => {
    console.log('获取巡视记录：', res)

    patrolRecordList.value = res.rows
  }).finally(() => { patrolRecordLoading.value = false })
}

/**
 * 获取巡视事件列表
 */
const eventRecordLoading = ref(true)
const eventRecordList = ref([]);
const getInspectionEventList = () => {
  eventRecordLoading.value = true
  const param = { businessId: props.cameraPatrolTaskExecutorId, businessType: 1 }
  listCommeneventrecord(param).then((res: any)=> {
    console.log('获取巡视事件：', res)

    eventRecordList.value = res.rows
  }).finally(() => { eventRecordLoading.value = false })
}

onMounted(async() => {
  proxy.$modal.loading('正在加载');
  const res = await getcameraPatrolTaskExcuter(props.cameraPatrolTaskExecutorId).finally(() => { proxy.$modal.closeLoading(); })
  Object.assign(form.value, res.data)

  getInspectionEventList()
  getPatrolLogList()
});
</script>
<style scoped lang="scss">
  :deep(.el-descriptions__cell .el-descriptions__label) {
    width: 120px !important;
    display: inline-block;
  }
</style>
